<template>
  <div class="equipContainners">
    <el-row :gutter="20" class="seachnav">
      <el-col :xs="7" :sm="6" :md="4" :lg="6" :xl="10">
        <div style="float: left;">
          <span><router-link  :to="{path:'/monitor/iots'}"><img :src="returnnormalpress" class="returnnormalpress"/></router-link></span>
          <span><img :src="equiplist" class="equiplist"/></span>
          <span><img :src="searchinvalid" class="searchinvalid" @click="detailSearchMask"/></span>
        </div>
        <div style="float: left; margin-left: 10px">
          <p  class="seachContent" style="line-height: 5px">{{this.seachContent}}</p>
          <p class="seachtitle" style="line-height: 5px">{{this.seachTitle}}</p>
        </div>
      </el-col>
    </el-row>
    <div class="header">
      <el-row :gutter="20">
        <el-col :xs="7" :sm="6" :md="4" :lg="6" :xl="2">
          <div class="grid-content bg-purple cusorimg" >
            <span @click="jumpRealtimenormal"><img :src="realtimenormalpress" /></span>
            <span @click="jumpReport"><img :src="listnormalpress" /></span>
          </div>
        </el-col>
        <el-col :xs="7" :sm="6" :md="4" :lg="6" :xl="8" class="layout">
          <div class="grid-content bg-purple">
            <div  @click="showequipdetailMask" class="titlebox">
              <span style="float: left; line-height: 20px; margin-right: 10px; min-width: 150px;">
            型号：{{this.queryEquipInfo.model}}<br/>
            交付(取证)时间：{{this.queryEquipInfo.delivery_time}}
          </span>
              <span  style="float: left;line-height: 20px;  margin-left: 10px; min-width: 150px">
            使用登记证：{{this.queryEquipInfo.register_number}}<br/>
            下次年审时间：{{this.queryEquipInfo.next_annual_trial}}
          </span>
            </div>

          </div>
        </el-col>
      </el-row>
    </div>
    <div class="content">
      <div class="first">
        <el-row :gutter="20">
          <el-col :xs="7" :sm="6" :md="4" :lg="7" :xl="6">
            <div class="grid-content bg-purple">
              <img :src="photo" style="width: 100%; height: 100%" v-if="this.queryEquipInfo.attachment.length === 0"/>
              <img :src="picture" style="width: 100%; height: 100%"/>
            </div>
          </el-col>
          <el-col :xs="7" :sm="6" :md="4" :lg="10" :xl="12" >
            <div class="grid-content bg-purple" @click="showPointInfoMask">
              <el-row>
                <el-col :span="24"><div class="grid-content bg-purple line">
                  <div class="contentlist" v-for="(items,index) in this.pointInfo" :key="index">
                    <div class="center">
                      <div class="title">{{items.fittings_name}}</div>
                      <div class="conlist" v-for="one in items.station">
                        <div class="list1" v-if="one.color === 0">{{one.name}}</div>
                        <div class="list2" v-if="one.color === 1">{{one.name}}</div>
                      </div>
                    </div>

                  </div>
                </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :xs="7" :sm="6" :md="4" :lg="7" :xl="6">
            <div class="grid-content bg-purple remark" @click="remarksShowMask">
              <div class="firstTitle">
                <img :src="beizhu"/>
                备注
              </div>
              <div class="rightCon">
                &emsp;&emsp;{{this.equipRemark}}
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="second">
        <el-row :gutter="20">
          <el-col :xs="7" :sm="6" :md="4" :lg="12" :xl="6">
            <div class="grid-content bg-purple">
              <div class="lfetTodayTitle">
                <img :src="jiridongt"/>
                今日数据
              </div>
              <div class="lfetstartTime">
                <span>开机时间</span>
                <span style="float: right">{{this.todayInfo.run_time}}h</span>
              </div>
              <div class="lfetstartc">
                <div style="float: left;width: 46%;">
                  <span >剩余寿命</span>
                  <span style="float: right">{{this.todayInfo.residual_life}}%</span>
                </div>
                <div style="float: left;width: 46%;margin-left: 24px">
                  <span >工作循环</span>
                  <span style="float: right">{{this.todayInfo.work_loop}}</span>
                </div>
              </div>
              <div class="lfetstartc">
                <div style="float: left;width: 46%;">
                  <span >开机次数</span>
                  <span style="float: right">{{this.todayInfo.on_off_num}}</span>
                </div>
                <div style="float: left;width: 46%;margin-left: 24px">
                  <span >告警次数</span>
                  <span style="float: right">{{this.todayInfo.alarm_num}}</span>
                </div>
              </div>
              <div class="lfetstartc">
                <div style="float: left;width: 46%;">
                  <span >总吨数</span>
                  <span style="float: right">{{this.todayInfo.ton_total}}t</span>
                </div>
                <div style="float: left;width: 46%;margin-left: 24px">
                  <span >能耗</span>
                  <span style="float: right">{{this.todayInfo.energy_consumption}}kWh</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="7" :sm="6" :md="4" :lg="12" :xl="6">
            <div class="grid-content bg-purple">
              <div class="t1">
                <div class="secondTitle">
                  <img :src="ristatus"/>
                  <span>七日数据</span>
                </div>
                <div class="secondRight">
                  <img :src="timeunselected" title="开机时间" @click="dateBtnStatus1"   v-if="btn1 === false"/>
                  <img :src="timeselected" title="开机时间" v-show="btn1"/>
                  <img :src="workunselected" title="剩余寿命"  @click="dateBtnStatus2"  v-if="btn2 === false"/>
                  <img :src="workselected" title="剩余寿命" v-show="btn2" />
                  <img :src="xunhuanunselected" title="工作循环" @click="dateBtnStatus3" v-if="btn3 === false"/>
                  <img :src="xhselected" title="工作循环" v-show="btn3"/>
                  <img :src="kjunselected" title="开机次数" @click="dateBtnStatus4" v-if="btn4 === false"/>
                  <img :src="kjselected" title="开机次数" v-show="btn4"/>
                  <img :src="gjunselected" title="告警次数" @click="dateBtnStatus5"  v-if="btn5 === false"/>
                  <img :src="gjselected" title="告警次数" v-show="btn5"/>
                  <img :src="ztsunselected" title="总吨数" @click="dateBtnStatus6" v-if="btn6 === false"/>
                  <img :src="zdsselected" title="总吨数" v-show="btn6"/>
                  <img :src="nhunselected" title="能耗" @click="dateBtnStatus7" v-if="btn7 === false"/>
                  <img :src="nhselected" title="能耗" v-show="btn7"/>
                </div>
              </div>
              <div class="secondList">
                <todayone v-show="btn1"></todayone>
                <today-second v-show="btn2"></today-second>
                <today-third v-show="btn3"></today-third>
                <four-graph v-show="btn4"></four-graph>
                <five-graph v-show="btn5"></five-graph>
                <six-graph v-show="btn6"></six-graph>
                <seven-graph v-show="btn7"></seven-graph>
              </div>
            </div>
          </el-col>
          <el-col :xs="7" :sm="6" :md="4" :lg="12" :xl="6">
            <div class="grid-content bg-purple">
              <div class="t1">
                <div class="secondTitle">
                  <img :src="sixmounth"/>
                  <span>六个月动态</span>
                </div>
                <div class="secondRight">
                  <img :src="timeunselected" title="开机时间" @click="dateBtnStatus8" v-if="btn8 === false"/>
                  <img :src="timeselected" title="开机时间" v-show="btn8"/>
                  <img :src="workunselected" title="剩余寿命"  @click="dateBtnStatus9" v-if="btn9 === false"/>
                  <img :src="workselected" title="剩余寿命" v-show="btn9"/>
                  <img :src="xunhuanunselected" title="工作循环" @click="dateBtnStatus10"  v-if="btn10 === false"/>
                  <img :src="xhselected" title="工作循环" v-show="btn10"/>
                  <img :src="kjunselected" title="开机次数" @click="dateBtnStatus11"  v-if="btn11 === false"/>
                  <img :src="kjselected" title="开机次数" v-show="btn11"/>
                  <img :src="gjunselected" title="告警次数" @click="dateBtnStatus12"  v-if="btn12 === false"/>
                  <img :src="gjselected" title="告警次数" v-show="btn12"/>
                  <img :src="ztsunselected" title="总吨数" @click="dateBtnStatus13"  v-if="btn13 === false"/>
                  <img :src="zdsselected" title="总吨数" v-show="btn13"/>
                  <img :src="nhunselected" title="能耗" @click="dateBtnStatus14"  v-if="btn14 === false"/>
                  <img :src="nhselected" title="能耗" v-show="btn14"/>
                </div>
              </div>
              <div class="secondList">
                <yearone-graph v-show="btn8"></yearone-graph>
                <yearsecond-graph v-show="btn9"></yearsecond-graph>
                <yearthird-graph v-show="btn10"></yearthird-graph>
                <yearfour-graph v-show="btn11"></yearfour-graph>
                <yearfive-graph v-show="btn12"></yearfive-graph>
                <yearsix-graph v-show="btn13"></yearsix-graph>
                <yearseven-graph v-show="btn14"></yearseven-graph>
              </div>

            </div>
          </el-col>
          <el-col :xs="7" :sm="6" :md="4" :lg="12" :xl="6">
            <div class="grid-content bg-purple">
              <div class="lfetTodayTitle">
                <img :src="quanzq"/>
                <span>全生命周期</span>
              </div>
              <div class="lfetstartTime">
                <span>开机时间</span>
                <span style="float: right">{{this.dynamic.run_time}}h</span>
              </div>
              <div class="lfetstartc">
                <div style="float: left;width: 46%;">
                  <span >剩余寿命</span>
                  <span style="float: right">{{this.dynamic.residual_life}}%</span>
                </div>
                <div style="float: left;width: 46%;margin-left: 26px">
                  <span >工作循环</span>
                  <span style="float: right">{{this.dynamic.work_loop}}</span>
                </div>
              </div>
              <div class="lfetstartc">
                <div style="float: left;width: 46%;">
                  <span >开机次数</span>
                  <span style="float: right">{{this.dynamic.on_off_num}}</span>
                </div>
                <div style="float: left;width: 46%;margin-left: 26px">
                  <span >告警次数</span>
                  <span style="float: right">{{this.dynamic.alarm_num}}</span>
                </div>
              </div>
              <div class="lfetstartc">
                <div style="float: left;width: 46%;">
                  <span >总吨数</span>
                  <span style="float: right">{{this.dynamic.ton_total}}t</span>
                </div>
                <div style="float: left;width: 46%;margin-left: 26px">
                  <span >能耗</span>
                  <span style="float: right">{{this.dynamic.energy_consumption}}kWh</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="second">
        <el-row :gutter="20">
          <el-col :xs="7" :sm="6" :md="4" :lg="12" :xl="6">
            <div class="grid-content bg-purple">
              <div style="height: 124px; " >
                <div class="lfetTodayTitle" style="width: 100%;">
                  <img :src="lpjdq"/>
                  零配件到期
                  <i class="el-icon-arrow-down" style="float: right; margin-right: 20px; font-weight: bold"></i>
                </div>
                <div v-if="dynamic1.length===0" style="position:absolute;left:37%;top:58%;transform:translate(-37%, -58%);color: #909399;" >暂无零配件到期</div>
                <div id="lpjdqisEmpty" class="lfetstartc" v-for="(item,index) in this.dynamic1" :key="index" style="line-height: 26px; font-size: 12px">
                  <div style="float: left;width: 35%;">
                    <span style="width: 30%;" class="spanContent" :title="item.fittings_id">{{item.fittings_id}}</span>
                    <span class="spanContentRight" style="width: 65%;float: right; text-overflow: ellipsis" :title="item.fittings_name">{{item.fittings_name}}</span>
                  </div>
                  <div style="float: left;width: 60%;margin-left: 5%">
                    <span style="width: 70%;" class="spanContent" :title="item.remind_time">{{item.remind_time}}</span>
                    <span class="spanContentRight" style="width: 28%;float: right" :title="item.cumulative_num_year">{{item.cumulative_num_year}}</span>
                  </div>
                </div>
              </div>

            </div>
          </el-col>
          <el-col :xs="7" :sm="6" :md="4" :lg="12" :xl="6">
            <div class="grid-content bg-purple">
              <div class="lfetTodayTitle" style="width: 100%;">
                <img :src="yjinfo"/>
                预警信息
                <i class="el-icon-arrow-down" style="float: right; margin-right: 20px; font-weight: bold"></i>
              </div>
              <div v-if="earlyWarningData.length===0" style="position:absolute;left:37%;top:58%;transform:translate(-37%, -58%);color: #909399;" >暂无预警信息</div>
              <div class="lfetstartc" v-for="(item,index) in this.earlyWarningData" :key="index" style="line-height: 23px; font-size: 12px">
                <div style="float: left;width: 42.5%;">
                  <span style="width: 45%;" class="spanContent" :title="item.station">{{item.station}}</span>
                  <span style="width: 55%;" class="spanContentRight" :title="item.point">{{item.point}}</span>
                </div>
                <div style="float: left;width: 52.5%;margin-left: 5%">
                  <span style="width: 75%" class="spanContent" :title="item.occurrence_time">{{item.occurrence_time}}</span>
                  <span style="width: 25%" class="spanContentRight" :title="item.count">{{item.count}}次</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="7" :sm="6" :md="4" :lg="12" :xl="6">
            <div class="grid-content bg-purple">
              <div class="lfetTodayTitle" style="width: 100%;">
                <img :src="yjinfo"/>
                操作记录
                <i class="el-icon-arrow-down" style="float: right; margin-right: 20px; font-weight: bold"></i>
              </div>
              <div class="lfetstartc" style="line-height: 23px; font-size: 12px" v-for="(item,index) in this.recordData" :key="index">
                <div style="float: left;width: 26.5%;">
                  
                  <span class="spanContentRight" style="width: 88%;float: right;" :title="item.name">{{item.name}}</span>
                </div>
                <div style="float:right;width: 66.5%;margin-left: 2%">
                  <span style=" float:left;margin-right:23%"  :title="item.value">{{item.value}}</span>
                  <span style=" width: 62%" class="spanContent" :title="item.occurrence_time">{{item.occurrence_time}}</span>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :xs="7" :sm="6" :md="4" :lg="12" :xl="6">
            <div class="grid-content bg-purple">
              <div class="lfetTodayTitle">
                <img :src="znpz"/>
                智能拍照
              </div>
              <div v-if="imgData.length===0" style="position:absolute;left:88%;top:58%;transform:translate(-45%, -50%);color: #909399;" >
                <span>暂无拍照图片,</span><br/>
              <span>请确定是否有配置摄像头</span>
              </div>
              <div class="photo">
                <!-- <div class="leftChild leftBody" v-on:mouseover="changeActive($event)" v-on:mouseout="removeActive($event)">
                  <div class="dataView">
                    <el-carousel trigger="click" :interval="3000" arrow="hover">
                      <el-carousel-item v-for="item in imgData" :key="item">
                        <img class="imageSize" :src="item">
                      </el-carousel-item>
                    </el-carousel>
                  </div>
                </div> -->
                <viewer :images="imgData"> 
                    <img v-for="item in imgData" :src="item" :key="item" class="imageSize">
                </viewer>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!--
      <div class="third">
        <el-row :gutter="20">
          <el-col :xs="7" :sm="6" :md="4" :lg="12" :xl="6">
            <div class="grid-content bg-purple" @click="gocalendar">
              <div class="lfetTodayTitle">
                <img :src="wbrl"/>
                日历

                <i class="el-icon-arrow-down" style="float: right; margin-right: 20px; font-weight: bold"></i>
              </div>
              <div class="caleader">
                <full-calendar :events="fcEvents" @changeMonth="changeMonth" locale="zh" style="width: 362px; height: 130px;"></full-calendar>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>-->
    </div>
    <point-info v-if="showPointInfo" @giveFalse="closePointInfoMask"   :pInfoCid="this.pCid"></point-info>
    <equipdetail v-if="showequipdetail" @giveFalse="closeequipdetailMask" :pInfoCid="this.pCid"></equipdetail>
    <remarks-dialog v-if="remarksShow" @giveFalse="remarksCloseMask" :pInfoCid="this.pCid"></remarks-dialog>
    <detail-search-dialog v-if="detailSearch" @giveFalse="searchCloseMask" v-on:rerule="Queryrerule"></detail-search-dialog>
  </div>
</template>
<script>
  import fullCalendar from 'vue-fullcalendar'
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/legend')
  // require('vue-fullcalendar/dist/vue-fullcalendar.js')
  import equip from '@/assets/home/equip.jpg'
  import realtimenormalpress from '@/assets/equipv2/realtimenormalpress.png'
  import listnormalpress from '@/assets/equipv2/listnormalpress.png'
  import returnnormalpress from '@/assets/equipv2/returnnormalpress.png'
  import equiplist from '@/assets/equipv2/equiplist.png'
  import searchinvalid from '@/assets/equipv2/searchHover.png'
  import beizhu from '@/assets/equipv2/beizhu.png'
  import jiridongt from '@/assets/equipv2/jiridongt.png'
  import ristatus from '@/assets/equipv2/ristatus.png'
  import timeunselected from '@/assets/equipv2/timeunselected.png'
  import timeselected from '@/assets/equipv2/timeselected.png'
  import workunselected from '@/assets/equipv2/workunselected.png'
  import workselected from '@/assets/equipv2/workselected.png' // 工作级别
  import xunhuanunselected from '@/assets/equipv2/xunhuanunselected.png' // 循环
  import xhselected from '@/assets/equipv2/xhselected.png'
  import kjunselected from '@/assets/equipv2/kjunselected.png' // 开机
  import kjselected from '@/assets/equipv2/kjselected.png'
  import gjunselected from '@/assets/equipv2/gjunselected.png'
  import gjselected from '@/assets/equipv2/gjselected.png'// 告警
  import ztsunselected from '@/assets/equipv2/ztsunselected.png'// 总吨数
  import zdsselected from '@/assets/equipv2/zdsselected.png'// 总吨数
  import nhunselected from '@/assets/equipv2/nhunselected.png'// 能耗
  import nhselected from '@/assets/equipv2/nhselected.png'// 能耗
  import photo from '@/assets/equipv2/photo.png'
  import sixmounth from '@/assets/equipv2/sixmounth.png'
  import lpjdq from '@/assets/equipv2/lpjdq.png'
  import yjselected from '@/assets/equipv2/yjselected.png'
  import yjinfo from '@/assets/equipv2/yjinfo.png'
  import czjl from '@/assets/equipv2/czjl.png'
  import quanzq from '@/assets/equipv2/quanzq.png'
  import znpz from '@/assets/equipv2/znpz.png'
  import noImage from '@/assets/controlStation/noImage.png'
  import wbrl from '@/assets/equipv2/wbrl.png'
  import pointInfo from './components/pointInfo'
  import equipdetail from './components/equipdetail'
  import todayone from './components/todatGraph/oneGraph'
  import todaySecond from './components/todatGraph/secondGraph'
  import todayThird from './components/todatGraph/thirdGraph'
  import fourGraph from './components/todatGraph/fourGraph'
  import fiveGraph from './components/todatGraph/fiveGraph'
  import sixGraph from './components/todatGraph/sixGraph'
  import sevenGraph from './components/todatGraph/sevenGraph'
  import yearoneGraph from './components/sixMounthGraph/yearoneGraph' // 以下是6个月动态
  import yearsecondGraph from './components/sixMounthGraph/yearsecondGraph'
  import yearthirdGraph from './components/sixMounthGraph/yearthirdGraph'
  import yearfourGraph from './components/sixMounthGraph/yearfourGraph'
  import yearfiveGraph from './components/sixMounthGraph/yearfiveGraph'
  import yearsixGraph from './components/sixMounthGraph/yearsixGraph'
  import yearsevenGraph from './components/sixMounthGraph/yearsevenGraph'
  import remarksDialog from './components/remarksDialog'
  import detailSearchDialog from './components/detailSearchDialog'
  import axios from 'axios'
  export default {
    components: {
      fullCalendar,
      pointInfo,
      equipdetail,
      todayone,
      todaySecond,
      todayThird,
      fourGraph,
      fiveGraph,
      sixGraph,
      sevenGraph,
      yearoneGraph,
      yearsecondGraph,
      yearthirdGraph,
      yearfourGraph,
      yearfiveGraph,
      yearsixGraph,
      yearsevenGraph,
      remarksDialog,
      detailSearchDialog,
      'full-calendar': require('vue-fullcalendar')
    },
    data() {
      return {
        wbrl,
        znpz,
        czjl,
        yjinfo,
        yjselected,
        lpjdq,
        sixmounth,
        photo,
        equip,
        realtimenormalpress,
        listnormalpress,
        returnnormalpress,
        equiplist,
        searchinvalid,
        beizhu,
        jiridongt,
        ristatus,
        timeunselected, // 时间
        timeselected,
        workunselected,
        quanzq,
        workselected,
        xunhuanunselected,
        xhselected,
        kjunselected,
        kjselected,
        gjunselected,
        gjselected,
        ztsunselected,
        zdsselected,
        nhunselected,
        nhselected,
        remarksShow: false,
        detailSearch: false,
        cid: this.$route.query.cid,
        equip_cid: this.$route.query.equip_cid,
        noImage,
        // 图片显示
        picture: '',
        imgData: [],
        seachContent: 'G18110+双梁桥式起重机+GT0001',
        seachTitle: '广东省/深圳市/6#车间',
        showPointInfo: false,
        showequipdetail: false,
        fcEvents: [],
        name: 'Sunny!',
        fcEvents: [],
        test: [{
          title: '测试',
          start: '2019-01-01'
        }, {
          title: '测试2',
          start: '2019-01-02'
        }],
        tpl: 0,
        itemLimit: 9,
        monthTitle: '',
        btnStatus: '1',
        /* 设备获取*/
        needCid: '',
        submitEquip: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_get_byid',
          id: '123'
        },
        queryEquipInfo: {},
        pCid: this.$route.query.cid,
        /**
         * 测点信息*/
        pointInfo: [],
        submitPoint: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_get_oid',
          cid: '1'
        },
        mainLeft: [],
        mainLeftCenter: [],
        mainSmallCenter: [],
        mainBigCenter: [],
        mainFCenter: [],
        mainZDCenter: [],
        /**
         * 今日动态
         * */
        submitToday: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'dynamic_today',
          cid: '1'
        },
        todayInfo: [],
        /**
         * 全生命周期
         * */
        submitdynamic: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'dynamic_total',
          cid: '1'
        },
        dynamic: [],
        /**
         * 开机时间
         * */
        submitruntime: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'dynamic_week_run_time',
          cid: '1'
        },
        runtime: [],
        xData: [],
        yData: [],
        btn1: false,
        btn2: false,
        btn3: false,
        btn4: false,
        btn5: false,
        btn6: false,
        btn7: false,
        btn8: false,
        btn9: false,
        btn10: false,
        btn11: false,
        btn12: false,
        btn13: false,
        btn14: false,
        /**
         * 零配件到期
         * */
        submitCondition: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'expire_remind_get_condition',
          data: {
            condition: {
              ids: [],
              equip_cid: '',
              equip_name: '',
              fittings_type: '',
              begin_time: '',
              end_time: '',
              fittings_id: '',
              fittings_name: '',
              status: ''
            },
            page: {
              page_size: '5',
              page_number: '1'
            }
          }
        },
        dynamic1: [],
        /**
         * 操作记录
         * */
        submitrecord: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_operation_record',
          cid: '1'
        },
        recordData: [],
        /**
         * 智能拍照
         * */
        submitpic: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_pic',
          cid: '1'
        },
        equipPic: [],
        /**
         * 备注
         * */
        submitequipRemark: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_remark_get_condition',
          data: {
            condition: {
              cid: '13109'
            },
            page: {
              page_size: '1',
              page_number: '0'
            }
          }
        },
        equipRemark: '',
        /**
         * 日历
         * */
        submitCalendar: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'equip_calendar',
          data: {
            cid: window.localStorage.getItem('Cid'),
            begin_time: '',
            end_time: ''
          }
        },
        /**
         * 日历
         * */
        submitEarlyWarning: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'earlywarning_overview',
          data: {
            condition: {
              cid: ''
            },
            page: {
              page_size: '5',
              page_number: '1'
            }
          }
        },
        earlyWarningData: [],
        // 设备获取站点
        getStationPid: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'station_get_by_cid',
          cid: ''
        },
        thePid: '',
        theName: '',
        theProjectName: '',
        theStatus: '',
        theType: '',
        QZnumber: '',
        plcNumber: '',
        compNumber: ''
      }
    },
    mounted() {
      this.getViewEquip()
      this.queryPointInfo()
      this.queryTodayInfo()
      this.querydynamic()
      this.dateBtnStatus1()
      this.dateBtnStatus8()
      this.getCondition()
      this.getRecord()
      this.getEquipPic()
      this.getequipRemark()
      this.getEarlyWarning()
      this.Queryrerule
    },
    methods: {
      // 获取精准查询的数据
      Queryrerule(val) {
        this.cid = val
        this.getViewEquip()
        this.queryPointInfo()
        this.queryTodayInfo()
        this.querydynamic()
        this.dateBtnStatus1()
        this.dateBtnStatus8()
        this.getCondition()
        this.getRecord()
        this.getEquipPic()
        this.getequipRemark()
        this.getEarlyWarning()
      },
      // 七日数据按钮切换
      dateBtnStatus1() {
        this.btn1 = true
        this.btn2 = false
        this.btn3 = false
        this.btn4 = false
        this.btn5 = false
        this.btn6 = false
        this.btn7 = false
      },
      dateBtnStatus2() {
        this.btn1 = false
        this.btn2 = true
        this.btn3 = false
        this.btn4 = false
        this.btn5 = false
        this.btn6 = false
        this.btn7 = false
      },
      dateBtnStatus3() {
        this.btn1 = false
        this.btn2 = false
        this.btn3 = true
        this.btn4 = false
        this.btn5 = false
        this.btn6 = false
        this.btn7 = false
      },
      dateBtnStatus4() {
        this.btn1 = false
        this.btn2 = false
        this.btn3 = false
        this.btn4 = true
        this.btn5 = false
        this.btn6 = false
        this.btn7 = false
      },
      dateBtnStatus5() {
        this.btn1 = false
        this.btn2 = false
        this.btn3 = false
        this.btn4 = false
        this.btn5 = true
        this.btn6 = false
        this.btn7 = false
      },
      dateBtnStatus6() {
        this.btn1 = false
        this.btn2 = false
        this.btn3 = false
        this.btn4 = false
        this.btn5 = false
        this.btn6 = true
        this.btn7 = false
      },
      dateBtnStatus7() {
        this.btn1 = false
        this.btn2 = false
        this.btn3 = false
        this.btn4 = false
        this.btn5 = false
        this.btn6 = false
        this.btn7 = true
      },
      // 六个月数据按钮切换
      dateBtnStatus8() {
        this.btn8 = true
        this.btn9 = false
        this.btn10 = false
        this.btn11 = false
        this.btn12 = false
        this.btn13 = false
        this.btn14 = false
      },
      dateBtnStatus9() {
        this.btn8 = false
        this.btn9 = true
        this.btn10 = false
        this.btn11 = false
        this.btn12 = false
        this.btn13 = false
        this.btn14 = false
      },
      dateBtnStatus10() {
        this.btn8 = false
        this.btn9 = false
        this.btn10 = true
        this.btn11 = false
        this.btn12 = false
        this.btn13 = false
        this.btn14 = false
      },
      dateBtnStatus11() {
        this.btn8 = false
        this.btn9 = false
        this.btn10 = false
        this.btn11 = true
        this.btn12 = false
        this.btn13 = false
        this.btn14 = false
      },
      dateBtnStatus12() {
        this.btn8 = false
        this.btn9 = false
        this.btn10 = false
        this.btn11 = false
        this.btn12 = true
        this.btn13 = false
        this.btn14 = false
      },
      dateBtnStatus13() {
        this.btn8 = false
        this.btn9 = false
        this.btn10 = false
        this.btn11 = false
        this.btn12 = false
        this.btn13 = true
        this.btn14 = false
      },
      dateBtnStatus14() {
        this.btn8 = false
        this.btn9 = false
        this.btn10 = false
        this.btn11 = false
        this.btn12 = false
        this.btn13 = false
        this.btn14 = true
      },
      eventClick(event, jsEvent, pos) {
        alert('zz')
        console.log('eventClick', event, jsEvent, pos)
      },
      detailSearchMask() {
        this.detailSearch = !this.detailSearch
      },
      searchCloseMask(val) {
        this.detailSearch = val
      },
      remarksShowMask() {
        this.remarksShow = !this.remarksShow
      },
      remarksCloseMask(val) {
        this.remarksShow = val
      },
      showPointInfoMask() {
        this.showPointInfo = !this.showPointInfo
      },
      closePointInfoMask(val) {
        this.showPointInfo = val
      },
      showequipdetailMask() {
        this.showequipdetail = !this.showequipdetail
      },
      closeequipdetailMask(val) {
        this.showequipdetail = val
      },
      // 跳转到日历信息
      gocalendar() {
        // this.$router.push({ path: '/monitor/calendar' })
      },
      // 获取设备信息
      getViewEquip() {
        this.submitEquip.id = this.cid
        axios.post('./equipmanage', this.submitEquip, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.queryEquipInfo = res.data.data
          if (res.data.data.attachment.length === 0) {
            var showpicture = axios.defaults.baseURL + '///'
          } else {
            var path = res.data.data.attachment[0].path
            showpicture = axios.defaults.baseURL + '/' + path
          }
          this.picture = showpicture
          this.seachTitle = this.queryEquipInfo.install_position + this.queryEquipInfo.workshop
          if (res.data.data.produce_number === '') {
            this.seachContent = res.data.data.equip_cid + '+' + res.data.data.name_label
          } else {
            this.seachContent = res.data.data.equip_cid + '+' + res.data.data.name_label + '+' + res.data.data.produce_number
          }
        })
      },
      // 获取测点信息
      queryPointInfo() {
        this.submitPoint.cid = this.cid
        axios.post('/equipmanage/v2', this.submitPoint, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.pointInfo = res.data.datas
          this.mainLeft = this.pointInfo[0].station
          this.mainLeftCenter = this.pointInfo[1].station
          this.mainSmallCenter = this.pointInfo[2].station
          this.mainBigCenter = this.pointInfo[3].station
          //          this.mainFCenter = this.pointInfo[4].station
          //          this.mainZDCenter = this.pointInfo[5].station
        })
      },
      // 获取今日动态
      queryTodayInfo() {
        this.submitToday.cid = this.cid
        axios.post('/equipmanage/dynamic', this.submitToday, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.todayInfo = res.data.data
        })
      },
      // 获取全生命周期
      querydynamic() {
        this.submitdynamic.cid = this.cid
        axios.post('/equipmanage/dynamic', this.submitdynamic, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.dynamic = res.data.data
        })
      },
      // 获取零配件到期提醒
      getCondition() {
        axios.post('/fittings', this.submitCondition, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
            this.dynamic1 = res.data.data.items
            })
      },
      // 获取操作记录
      getRecord() {
        this.submitrecord.cid = this.cid
        axios.post('/equipmanage/v2', this.submitrecord, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.recordData = res.data.datas;
          for(let i = 0;i<=this.recordData.length;i++){
              if(this.recordData[i].value == "断开"){
                 this.recordData[i].value = "停止" 
              }
          }
        })
      },
      // 智能拍照
      getEquipPic() {
        this.submitpic.cid = this.cid
        axios.post('/equipmanage/v2', this.submitpic, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          if (res.data.datas.length > 0) {
            this.imgData = []
            for (let i = 0; i < res.data.datas.length; i++) {
              this.imgData.push(axios.defaults.baseURL + '/' + res.data.datas[i].path)
            }
          }
        })
      },
      // 预警信息
      getEarlyWarning() {
        this.submitEarlyWarning.data.condition.cid = this.cid
        axios.post('/earlywarning', this.submitEarlyWarning, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          if (res.data.data.items.length > 0) {
            this.earlyWarningData = res.data.data.items
          }
        })
      },
      changeActive($event) {
        $event.currentTarget.className = 'leftChild leftBody active'
      },
      removeActive($event) {
        $event.currentTarget.className = 'leftChild leftBody'
      },
      // 备注
      getequipRemark() {
        this.submitequipRemark.data.condition.cid = this.cid
        axios.post('/equipmanage/remark', this.submitequipRemark, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.equipRemark = res.data.data.items[0].content
        })
      },
      // 日历内容
      goPrev() {
        this.$children[0].goPrev()
      },
      goNext() {
        this.$children[0].goNext()
      },
      changeMonth(start, end, current) {
        // this.monthTitle = foramatData(current, 'MMMM YYYY')
        this.submitCalendar.data.cid = this.cid
        this.submitCalendar.data.begin_time = current
        this.submitCalendar.data.end_time = end
        axios.post('/equipmanage/v2', this.submitCalendar, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          for (let a = 0; a < res.data.datas.length; a++) {
            res.data.datas[a].start = res.data.datas[a].date
            res.data.datas[a].title = '●'
            res.data.datas[a].cssClass = 'calendarPoint'
          }
          this.fcEvents = res.data.datas
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
            this.fcEvents = []
          })
      },
      /**
       * 日期格式化内容被点击时触发
       * @param event      {}  当前被点击内容对象
       * @param jsEvent    {}  被点击的鼠标事件对象
       * @param pos        {}  当前位置对象
       */
      eventClick(event, jsEvent, pos) {
        console.log('eventClick', event, jsEvent, pos)
      },
      /**
       *
       * @param day
       * @param jsEvent
       */

      dayClick(day, jsEvent) {
        console.log('dayClick', day, jsEvent)
      },
      /**
       *
       * @param day
       * @param events
       * @param jsEvent
       */
      moreClick(day, events, jsEvent) {
        // console.log('moreCLick', day, events, jsEvent)
      },
      // 跳转实时监控
      jumpRealtimenormal() {
        this.getStationPid.cid = this.$route.query.cid
        axios.post('/station', this.getStationPid, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          this.thePid = res.data.data.pid
          this.QZnumber = res.data.data.crane_id
          for (var j = 0; j < res.data.data.cids.length; j++) {
            if (res.data.data.cids[j].indexOf('plc') !== -1) {
              this.plcNumber = res.data.data.cids[j]
            } else if (res.data.data.cids[j].indexOf('comp') !== -1) {
              this.compNumber = res.data.data.cids[j]
            }
          }
          this.theProjectName = res.data.data.project_name
          this.theStatus = res.data.data.status
          this.theType = res.data.data.type
          this.realjump()
        })
          .catch((error) => {
            console.log(error)
            if (error.data.errcode === '00001') {
              this.$message({
                type: 'info',
                message: '该设备未匹配站点'
              })
            }
          })
      },
      // 跳转实时
      realjump() {
        var equipCid = this.thePid
        var equipName = this.theName
        var equipProjectName = this.theProjectName
        var equipStatus = this.theStatus
        var equipType = this.theType
        this.$router.push({
          path: '/monitor/homepage/grab',
          query: {
            cid: equipCid
          }
        })
        window.localStorage.setItem('num', equipCid) // 站点编号
        window.localStorage.setItem('Cid', this.QZnumber) // 设备编号
        window.localStorage.setItem('name', equipName) // 站点编号
        window.localStorage.setItem('plc', this.plcNumber) // 网关
        window.localStorage.setItem('proname', equipProjectName) // 项目名称
        window.localStorage.setItem('status', equipStatus) // 设备状态
        window.localStorage.setItem('type', equipType) // 设备类型
        window.localStorage.setItem('compNumber', this.compNumber) // 通电时间
      },
      // 跳转报表
      jumpReport() {
        this.$router.push({
          path: '/monitor/reports',
          query: {
            cid: this.$route.query.cid
          }
        })
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" >
  .equipContainners{
    width: 100%;
    min-height: 45vw;
    background-color: #EFEFEF;
    /deep/ .week-row:nth-child(2n) {
      background-color: #F7F8F9;
    }
    .seachnav{
      width: 60%;
      height: 50px;
      position: fixed;
      z-index: 2;
      top:0;
      bottom: 0;
      line-height: 50px;
      padding-left: 20px;
      .returnnormalpress{
        vertical-align: middle;
        cursor: pointer;
      }
      .equiplist{
        vertical-align: middle;
        cursor: pointer;
        margin-left: 20px;
      }
      .searchinvalid{
        vertical-align: middle;
        cursor: pointer;
      }
      .seachContent{
        font-size:18px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        padding-top: 0px;
        color:rgba(51,51,51,1);
      }
      .seachtitle{
        font-size:12px;
        font-family:MicrosoftYaHei;
        font-weight:400;
        color:rgba(102,102,102,1);
      }
      .con{
        width: 85%;
        height: 50px;
        float: right;
        margin-right: 20px;
        line-height: 3px;
        padding-left: 0 !important;

      }
    }
    .header{
      width: 100%;
      height: 70px;
      line-height: 30px;
      padding-left: 20px;
      background-color: #EFEFEF;
      font-size:14px;
      font-family:MicrosoftYaHei;
      font-weight:400;
      color:rgba(102,102,102,1);
      margin-top: 10px;
      img{
        padding-left: 20px;
        vertical-align: middle;
        margin-top: 20px;
        cursor: pointer;
      }
      .titlebox{
        min-width: 200px;
        height: 50px;
        cursor: pointer;
        margin-top: 10px;
        padding-top: 5px;
        padding-left: 10px;

      }
      .titlebox:hover{
        min-width: 200px;
        height: 50px;
        cursor: pointer;
        background-color: #DDDDDD;
      }
    }
    .content{
      width: 98%;
      margin-left: 20px;
      .first{
        .grid-content {
          border-radius: 0px;
          height: 320px;
          overflow: hidden;
          /*padding-left: 10px;*/
        }

        .line{
          border-right: 1px solid #EFEFEF;
        }
        .contentlist{
          width: 20%;
          height: 320px;
          border-right: 1px solid #EFEFEF;
          font-size:14px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(51,51,51,1);
          padding-left: 15px;
          line-height: 26px;

          float: left;
          .center{
            width: 100%;
            height: 305px;
            overflow-x: hidden;
            overflow-y: hidden;
            .title{
              width: 100%;
              height: 30px;
            }
            .conlist{
              width: 100%;
              height: 28px;
              float: left;
              /*border: 1px solid red;*/
              .list1{
                width: 100%;
                height: 26px;
                color: #666
              }
              .list2{
                width: 100%;
                height: 26px;
                color: #3FBEFC
              }
            }
          }

        }
        .firstTitle{
          width: 100%;
          height: 40px;
          line-height: 40px;
          font-size:14px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          padding-left: 15px;
          color:rgba(51,51,51,1);
          img{
            vertical-align: middle;
          }
        }
        .rightCon{
          width: 92%;
          margin-left: 20px;
          font-size:14px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(102,102,102,1);
          line-height:24px;
          overflow: hidden;
        }
      }
      .second{
        width: 100%;
        line-height: 20px;
        .t1{
          width: 100%;
          height: 50px;
          .secondTitle{
            width: 40%;
            height: 30px;
            /*line-height: 30px;*/
            padding: 10px 0 0 10px;
            float: left;
            img{
              vertical-align: middle;
            }
            span{
              font-size:14px;
              font-family:MicrosoftYaHei;
              font-weight:400;
              color:rgba(51,51,51,1);
            }
          }
          .secondRight{
            width: 55%;
            height: 30px;
            float: right;
            margin-right: 10px;
            padding: 10px 5px 0 10px;
            text-align: right;
            img{
              vertical-align: middle;
            }
          }
        }
        .photo{
          width: 90%;
          height: 80%;
          margin-left: 5%;
          /deep/ .el-carousel__container {
            position: relative;
            height: 136px
          }
          /deep/ .imageSize {
            width: 100%;
            height: 100%;
          }
        }
        .secondList{
          width: 95%;
          height: 120px;
          margin-left: 2.5%;

        }
        .grid-content {
          border-radius: 0px;
          height: 174px;
          margin-top: 20px;
          overflow: hidden;
        }
        .lfetTodayTitle{
          width: 100%;
          height: 30px;
          padding:10px 0 0 10px;
          font-size:14px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(51,51,51,1);
          img{
            vertical-align: middle;
          }
        }
        .lfetstartTime{
          width: 91%;
          height: 30px;
          padding:0px 0px 0 0px;
          margin-top: 10px;
          margin-left: 20px;
          font-size:14px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(119,119,119,1);
          line-height:26px;
          border-bottom: 1px solid #E8E8E8;
        }
        .lfetstartc{
          width: 95%;
          padding:0px 10px 0 0px;
          margin-top: 10px;
          margin-left: 20px;
          font-size:14px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(119,119,119,1);
          line-height:26px;
          .spanContent {
            float: left;
            height: 23px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .spanContentRight {
            float: right;
            height: 23px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .grid-content {
            border-radius: 0px;
            height: 10px;
          }
        }
        .caleader{
          width: 90%;
          height: 140px;
          margin-left: 5%;
        }

      }
      .third{
        .grid-content {
          border-radius: 0px;
          height: 174px;
          margin-top: 20px;
        }
        .lfetTodayTitle{
          width: 100%;
          height: 30px;
          padding:10px 0 0 10px;
          font-size:14px;
          font-family:MicrosoftYaHei;
          font-weight:400;
          color:rgba(51,51,51,1);
          img{
            vertical-align: middle;
          }
        }
        .caleader{
          .full-calendar-header .header-center .title {
            margin: 0 10px;
            color: #666;
            font-size: 14px;
          }
          /deep/ .calendarPoint {
            background-color: transparent!important;
            text-align: right;
            color: #FF9248!important;
          }
          /deep/ b, strong {
            font-weight: normal;
            font-size: 12px;
            color: #333;
            border-color: #fff;
          }
          /deep/ b, strong:last-child {
            font-weight: normal;
            font-size: 12px;
            color: #333;
            border-color: #e0e0e0;
          }
          /deep/ .full-calendar-body {
            margin-top: 0px;
          }
          /deep/ .comp-full-calendar ul, .comp-full-calendar p {
            font-size: 12px;
          }
          /deep/ .full-calendar-body .dates .week-row .day-cell .day-number {
            text-align: center;
          }
          /deep/ .full-calendar-body .dates .week-row .day-cell {
            flex: 1;
            height: 15px;
            padding: 4px;
            border-right: 1px solid #e0e0e0;
            /*border-left: 1px solid red;*/
            border-bottom: 1px solid #e0e0e0;
          }
          /deep/ .full-calendar-body .dates .week-row .day-cell:nth-child(1) {
            flex: 1;
            height: 15px;
            padding: 4px;
            border-right: 1px solid #e0e0e0;
            /*border-left: 1px solid #e0e0e0;*/
            border-bottom: 1px solid #e0e0e0;
          }
          /deep/.comp-full-calendar {
            padding: 0px 0px 10px 0px;
            background: #fff;
            max-width: 960px;
            margin: 0 auto;
          }
          /deep/ .full-calendar-body .dates .week-row .day-cell{
            min-height: 15px;
            color: #666;
            border-color: #fff;
            border-bottom: 1px solid #e0e0e0 ;
          }

          /deep/ .full-calendar-body .dates .week-row .day-cell:first-child{
            min-height: 15px;
            color: #666;
            border-color: #fff;
            border-bottom: 1px solid #e0e0e0 ;
          }
          /deep/ .full-calendar-body .dates .week-row .day-cell:last-child{
            min-height: 15px;
            color: #666;
            border-right: 1px solid #e0e0e0 ;

          }
          /*/deep/ .full-calendar-body .dates .week-row .day-cell:first-child{*/
            /*min-height: 15px;*/
            /*color: #666;*/
            /*border-left: 1px solid #fff ;*/
            /*border-bottom: 1px solid red ;*/
          /*}*/
        }
      }
      .el-row {
        margin-bottom: 20px;
        &:last-child {
          margin-bottom: 0;
        }
      }
      .el-col {
        border-radius: 0px;
      }
      .bg-purple-dark {
        background: #fff;
      }
      .bg-purple {
        background: #fff;
        cursor: pointer;
      }
      .bg-purple-light {
        background: #fff;
      }
      .row-bg {
        padding: 10px 0;
        background-color: #fff;
      }
    }
  }
</style>
